<template>
  <div class="follow">
      <div class="follow-main">
        <tabs :data="tabsData" :value="currentIndex" @event="tabClick"></tabs>
        <div class="tabs-wrap scroll-wrap">
          <no-content v-if="!listData.length"></no-content>
          <div class="box" v-show="currentIndex===0">
            <div class="box-content">
            <nuxt-link :to="{name:'zhiyuan-school-detail',query:{collegeId:item.id}}" tag="a" class="" v-for="(item,index) in listData" :key="index">
              <div class="box-main flex">
                <block type="school" :data="{img:item.schoolBadge, w:60, h:60, name:item.name,city:item.cityName,typeName:item.collegeTypeName,level:item.collegeLevelList}" :item="item"></block>
              </div>
              <div class="box-button">
                <button class="button button-clear" @click.prevent="setFavorite(item)">
                  <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
                </button>
              </div>
              <!-- <img :src="item.schoolBadge | imgResize(50,50)" />
              <div class="item-content">
                <h3>{{item.name}}</h3>
                <p>
                  <span v-for="ceil in item.collegeLevel" :key="ceil.id">{{ceil.name}}&nbsp;&nbsp;</span>
                </p>
              </div>
              <button class="button button-clear" @click.prevent="setFavorite(item)">
                <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
              </button> -->
            </nuxt-link>
            </div>
          </div>
          <div class="box" v-show="currentIndex===1">
            <div class="box-content">
            <nuxt-link :to="{name:'zhiyuan-major-detail',query:{id:item.id}}" tag="a" class="" v-for="(item,index) in listData" :key="index">
              <div class="box-main flex">
                <block type="major" :data="{name:item.name,city:item.subCategoryName}" :item="item"></block>
              </div>
              <div class="box-button">
                <button class="button button-clear" @click.prevent="setFavorite(item)">
                  <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
                </button>
              </div>

              <!-- <div class="item-content">
                <h3>{{item.name}}</h3>
                <p>
                  {{item.subCategoryName}}
                </p>
              </div>
              <button class="button button-clear" @click.prevent="setFavorite(item)">
                <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
              </button> -->
            </nuxt-link>
            </div>
          </div>
          <div class="box" v-show="currentIndex===2">
            <div class="box-content">
            <nuxt-link :to="{name:'zhiyuan-profession-detail',query:{id:item.id}}" tag="a" class="" v-for="(item,index) in listData" :key="index">
              <div class="box-main flex">
                <block type="major" :data="{name:item.name,city:item.careerCategory}" :item="item"></block>
              </div>
              <div class="box-button">
                <button class="button button-clear" @click.prevent="setFavorite(item)">
                 <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
                </button>
              </div>
              <!-- <div class="item-content">
                <h3>{{item.name}}</h3>
                <p>
                  {{item.careerCategory}}
                </p>
              </div>
              <button class="button button-clear" @click.prevent="setFavorite(item)">
                <span class="icon" :class="item.cancel?'icon-star-outline':'icon-star royal-deep'"></span>
              </button> -->
            </nuxt-link>
            </div>
          </div>
        </div>
        <paginate v-if="listData.length" :total="totalElements" :current-page="page" @pagechange="pagechange" :display="10"></paginate>
      </div>
  </div>
</template>

<script>
import { api } from '@/utils'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  // layout: 'user-center',
  layout: 'zhiyuan-select',
  data () {
    return {
      infoPopupFlag: false,
      bindPopupFlag: false,
      totalElements: 0,
      currentIndex: 0,
      tabsData: [],
      listData: [],
      provincesData: [],
      cityData: [],
      districtData: [],
      schoolData: [],
      yearData: ['高一', '高二', '高三'],
      bindParams: {
      },
      competeParams: {
      },
      page: 1,
      params: {
        type: 1,
        page: 0,
        size: 10,
        sort: 'desc'
      },
      count: []
    }
  },
  computed: {
    ...mapState({
      userInfo: 'userInfo',
      authInfo: 'authInfo'
    }),
    canOpenVip () {
      const { level, isValid } = this.userInfo
      if (!isValid || !level || level === 'EXPERIENCE') {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    ...mapMutations(['SET_AUTH_INFO']),
    ...mapActions(['getUserInfo']),
    bindTitile (index) {
      let _path = ['/user-center', '/user-center/follow', '/user-center/center']
      this.$router.push({
        path: _path[index]
      })
    },
    setFavorite (item) {
      this.$axios.get(api.zhiyuanSetFavorite, {
        params: {
          type: this.currentIndex + 1,
          id: item.id
        }
      }).then(data => {
        this.$set(item, 'cancel', !item.cancel)
      })
    },
    filterCityDistrict (arr, id) {
      for (let key in arr) {
        let item = arr[key]
        if (item.id === id) return item
      }
    },
    initData () {
      Promise.all([
        this.$axios.get(api.area),
        this.$axios.get(api.findScholl, {
          params: {
            districtId: this.userInfo.district.id
          }
        })
      ]).then(data => {
        this.provincesData = data[0]
        this.cityData = this.filterCityDistrict(this.provincesData, this.userInfo.province.id).cities
        this.districtData = this.filterCityDistrict(this.cityData, this.userInfo.city.id).districts

        this.schoolData = data[1]._embedded.schools
        this.competeParams = {
          name: this.userInfo.name,
          gender: this.userInfo.gender,
          provinceId: this.userInfo.province.id,
          cityId: this.userInfo.city.id,
          districtId: this.userInfo.district.id,
          school: this.userInfo.school.id,
          startYear: this.userInfo.startYear,
          isStudent: this.userInfo.isStudent
        }
      })
    },
    pagechange (index) {
      this.params.page = index - 1
      this.page = index
      this.getData(this.params)
    },
    getData (params) {
      this.$axios.get(api.favoriteGetAll, {
        params: params
      }).then(data => {
        this.listData = data.list.content
        this.totalElements = data.list.totalElements
        this.count = []
        this.count = [data.collegeNum, data.majorNum, data.careerNum]
        if (this.params.page === 0) {
          this.tabsData = [`关注的大学(${data.collegeNum})`, `关注的专业(${data.majorNum})`, `关注的职业(${data.careerNum})`]
        }
      })
    },
    selectChange (type) {
      if (type === 'province') {
        this.cityData = []
        this.districtData = []
        this.schoolData = []
        this.competeParams.cityId = ''
        this.competeParams.districtId = ''
        this.competeParams.school = ''
        this.competeParams.provinceId && this.$axios.get(`${api.cities}/${this.competeParams.provinceId}/cities`).then(data => {
          this.cityData = data._embedded.cities
        })
      } else if (type === 'city') {
        this.districtData = []
        this.schoolData = []
        this.competeParams.districtId = ''
        this.competeParams.school = ''
        this.competeParams.cityId && (this.districtData = this.filterCityDistrict(this.cityData, this.competeParams.cityId).districts)
      } else if (type === 'district') {
        this.schoolData = []
        this.competeParams.school = ''
        this.competeParams.districtId && this.$axios.get(api.findScholl, {
          params: {
            districtId: this.competeParams.districtId
          }
        }).then(data => {
          this.schoolData = data._embedded.schools
        })
      }
    },
    competeInfo (scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          let { school, gender, provinceId, cityId, districtId, startYear, name, isStudent } = this.competeParams
          let params = {
            ...this.userInfo,
            gender: gender,
            name,
            startYear,
            id: this.userInfo.id,
            school: {
              id: school
            },
            // address: {
            province: {
              id: provinceId
            },
            city: {
              id: cityId
            },
            district: {
              id: districtId
            },
            isStudent
            // }
          }
          console.debug(isStudent)
          this.$axios.post(api.updateUserInfo, params).then(data => {
            this.$toasted.success('修改信息成功')
            this.infoPopupFlag = false
            this.getUserInfo(this)
          }).catch(() => {
            this.$toasted.error('接口调用失败')
          })
        }
      })
    },
    tabClick (index) {
      this.currentIndex = index
      this.params.type = index + 1
      this.params.page = 0
      this.page = this.params.page + 1
      if (this.count[index] > 0) {
        this.getData(this.params)
      } else {
        this.listData = []
      }
    },
    bindCard (scope) {
      this.$validator.validateAll(scope).then((result) => {
        if (result) {
          let authInfo = this.authInfo
          this.$axios.post(api.bindingCard, {
            ...this.bindParams,
            phoneNumber: authInfo.phoneNum
          }).then(data => {
            let authInfo = this.lodash.cloneDeep(this.authInfo)
            authInfo.isValid = true
            authInfo.level = data.level
            this.SET_AUTH_INFO(authInfo)
            this.getUserInfo(this)
            this.bindPopupFlag = false
          }).catch(err => {
            this.$toasted.error(err.data.message)
          })
        }
      })
    },
    close () {
      this.infoPopupFlag = !this.infoPopupFlag
      this.initData()
      console.log(this.competeParams)
    }
  },
  mounted () {
    /* for (let i = 0; i < 4; i++) {
      this.yearData[i] = formatDate(new Date(), 'yyyy') - i
    } */
    this.initData()
    this.getData(this.params)
  }
}
</script>

<style scoped lang="scss">
.follow{
  padding:20px;
  background:$light;
  border-radius:10px;
  &-main {
    width:100%;
    overflow: hidden;
    display: flex;
    // padding: 20px 36px;
    flex-direction: column;
    /deep/ .tab {
      margin: 0 0 30px;
      .triped {
        background: $royal-deep;
      }
      > span {
        padding-right: 40px;
      }
    }
  }
  .tabs-wrap {
    width:100%;
    .box {
      .box-content{
        a{
          border-bottom:1px solid $line;
          display:flex;
          align-items:center;
          padding:0px !important;
        }
      }
    }
  }
}

</style>
